<!-- 表格 -->
<template>
   <div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 98.5% ;margin-left:12px;"
      @selection-change="handleSelectionChange"
      border
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
    <el-table-column type="selection" width="55" />
        <el-table-column label="编号"  >
            <template #default="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="用户名"  >
            <template #default="scope">{{ scope.row.username }}</template>
        </el-table-column>
        <el-table-column label="管理员分类"  >
            <template #default="scope">{{ scope.row.admin }}</template>
        </el-table-column>
        <el-table-column label="员工姓名"  >
            <template #default="scope">{{ scope.row.staffname }}</template>
        </el-table-column>
        <el-table-column label="部门名称"  >
            <template #default="scope">{{ scope.row.depname }}</template>
        </el-table-column>
        <el-table-column label="创建日期"  >
            <template #default="scope">{{getSimpleDate (scope.row.date)}}</template>
        </el-table-column>
        <el-table-column label="授权状态"  >
            <template #default="scope">{{ scope.row.impower }}</template>
        </el-table-column>
        <el-table-column label="操作"  >
            <template #default="scope">
                <el-button link type="primary" @click="redactdata(scope.row)">编辑查看</el-button>
                <el-button link type="primary" v-on:click="deletea(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table> 
    <UserControlAmend :isshowConlook="isshowConlook"
     @guanbi = "guanbi" 
     @close="closelookbtn"
    :rowdata="rowdata"
    ></UserControlAmend>
   </div>
  </template>
  
  
  <script lang="ts">
  import { ref,defineComponent, reactive} from 'vue'
  import { ElTable } from 'element-plus'
  import UserControlAmend from './UserControlAmend .vue'
  export default defineComponent({
    components:{UserControlAmend},
    name:"UserControlTable",
    props:['tableData'],
    setup(props,ctx){
    interface User {
    id: number,
      username:string,
      admin:string,
      staffname:string,
      depname:string,
      date:string,
      impower:string,
      password:string
  }
  // 编辑模态框
  let isshowConlook = ref(false)
  const multipleTableRef = ref<InstanceType<typeof ElTable>>()
  const multipleSelection = ref<User[]>([])
  const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
  }
  let tableData: User[] = props.tableData
  
  function getSimpleDate(date:any) {
                    var date :any= new Date(date);
                    var y = date.getFullYear();
                    var m = date.getMonth() + 1;
                    m = m < 10 ? ('0' + m) : m;
                    var d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    var h = date.getHours();
                    var minute = date.getMinutes();
                    minute = minute < 10 ? ('0' + minute) : minute;
                    var s = date.getSeconds();
                    s = s < 10 ? '0' + s : s;
                    return y + '-' + m + '-' + d + ' ' ;
                    }
  // 查询

  // 删除
  function deletea(a:any){
    console.log(a.id)
    let aa =  props.tableData.filter((b:any)=>{
      // console.log(b);
      if(a.id !== b.id){
          return props.tableData
      }
    })
    props.tableData.length=0
    props.tableData.push(...aa)
    // console.log(...aa);
  }
  // 编辑
  let rowdata :any = ref({})
  function redactdata(a:any){
    rowdata.value = a
    isshowConlook.value = true
    // console.log(tableData[0].date);
    
  }
  // 确认修改
  function closelookbtn(a:any){
      isshowConlook.value = false
      tableData.forEach((i:any)=>{
        if(i.id == a.id){ 
          tableData[i.id - 1] = a
          console.log(a);
          
        }
      })
    }
  // 关闭弹窗
  function guanbi(){
      isshowConlook.value = false
    }
  return{
    tableData,multipleTableRef,handleSelectionChange,
    deletea,redactdata,isshowConlook,guanbi,closelookbtn,rowdata,
    getSimpleDate
  }
  }
}
)
  </script>